import { compileToFunction } from "../src/compiler/index.js"
import Vue from "../src/index.js"

export default function Test() {
  // diff测试

  let vm = new Vue({
    el: "#app",
    data() {
      return { fqm: ["fqmyysjjd0", "fqmyysjjd1", "fqmyysjjd2", "fqmyysjjd3", 'fqyysjjd4'], jj: "jjyyzwzfqm" }
    }
  })

  let vnode1 = compileToFunction(`
  <div id="app" a="1" jj="jj" style="color: black">
    <li key="0">{{ fqm[0] }}</li>
    <li key="1">{{ fqm[1] }}</li>
    <li key="2"><a>{{ fqm[2] }}fqmyysjjd<li>fqmyysjjd<p>fqmyysjjd</p></li></a></li>
    <li key="3">{{ fqm[3] }}</li>
    <li key="4">{{ fqm[4] }}</li>
  </div>
`).call(vm)

  let vnode2 = compileToFunction(`
  <div id="app" jj="jj" style="color: black">
    <li key="0">{{ fqm[0] }}</li>
    <li key="2">{{ fqm[2] }}</li>
    <li key="4">{{ fqm[4] }}</li>
    <li key="5">fqmyysjjd</li>
  </div>
`).call(vm)

  setTimeout(() => {
    vm._update(vnode1)
    console.log(vm.$el)
    setTimeout(() => {
      vm._update(vnode2)
      console.log(vm.$el)
    }, 2000);
  }, 2000);

}